<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="@{|/${WEB_THEME}/module/macro.html|}"></head>
<body>
<header id="header">
	<div th:replace="@{|/${WEB_THEME}/module/navbar.html|}"></div>
</header>
<div class="tz-container tz-content">
	<div class="tz-main">
		<div class="swiper-container mb-20" th:if="${not #lists.isEmpty(sliderList)}">
			<div class="swiper-wrapper">
				<div th:each="item:${sliderList}" class="swiper-slide">
					<a th:href="@{${'/blog/article/'+item.id}}">
						<img th:src="${item.coverImage}" style="max-height: 450px">
						<p class="slider-title" th:text="${item.title}"></p>
					</a>
				</div>
			</div>
			<div class="swiper-pagination"></div>
			<div class="swiper-button-prev"><i class="fa fa-chevron-circle-left"></i></div>
			<div class="swiper-button-next"><i class="fa fa-chevron-circle-right"></i></div>
		</div>

		<div class="no-article-content" th:if="${#lists.isEmpty(articleList)}">
			Sorry, 暂未发现任何文章~
		</div>
		<div th:each="item,temp : ${articleList}" class="blogs">
			<span th:if="${item.top==1}" class="fa fa-superscript-top superscript superscript-top"></span>
			<span th:style="${item.coverImage==''?'display: none':''}" class="blogpic" hidden><a  th:href="@{${'/blog/article/'+item.id}}"><img th:src="${item.coverImage==''?'':item.coverImage}"></a></span>
			<h3 class="blogtitle"><a th:href="@{${'/blog/article/'+item.id}}" th:text="${item.title}" ></a></h3>
			<a  th:href="@{${'/blog/article/'+item.id}}"><p  th:text="${item.description}" class="blogtext"></p></a>
			<div class="bloginfo">
				<ul>
					<li><span class="fa fa-clock-o"></span><span th:text="${#dates.format(item.createTime,'yyyy-MM-dd HH:mm:ss')}"></span></li>
					<li><a class="comment-link-a" th:href="@{${'/blog/article/'+item.id}}"><span class="fa fa-eye"></span><span th:text="${item.lookCount}? ${item.lookCount} : 0"></span></a></li>
					<li><a class="comment-link-a" th:href="@{${'/blog/article/'+item.id+'#comment'}}"><span class="fa fa-comments-o"></span><span th:text="${item.commentCount}? ${item.commentCount} : 0"></span></a></li>
				</ul>
				<a class="read-more" th:href="@{${'/blog/article/'+item.id}}">阅读全文</a>
			</div>
		</div>
		<div th:if="${page!=null && page.pages gt 1}" id="pagebar">
			<div style="text-align: center;margin:250px auto;">
				<div id="pager" class="pager clearfix">
				</div>
			</div>
		</div>
	</div>
	<div th:replace="@{|/${WEB_THEME}/module/sidebar.html|}"></div>
</div>
<div th:replace="@{|/${WEB_THEME}/module/footer.html|}"></div>
<div class="return_top"><a class=" fa fa-arrow-up"></a></div>
</body>
<script>

	    const pageUrl = '[[${pageUrl}]]';
		const total='[[${page.total}]]';
		const currentPage='[[${page.current}]]';
		$("#pager").zPager({
			totalData: total,
			current:[[${page.current}]],
			pageData:[[${page.pages}]],
			btnShow: true,
			ajaxSetData: false
		});


	function currentPage(pageNo){
		console.log("当前页码数：" + currentPage+"pageNo="+pageNo+"pageUrl="+pageUrl);
		if(currentPage!=pageNo){
			console.log("跳转页码数：" + currentPage+"pageNo="+pageNo+"pageUrl="+pageUrl);
			window.location.href = (ctx + pageUrl + '/' +  pageNo).replace('//', '/');
		}

	}
</script>
</html>